const ProductRow = {
	template: `
		<ul class="row">
			<li class="cell">
				<input type="checkbox" v-model="product.selected">
			</li>
			<li class="cell product-image" style="width: 120px;">
				<img :alt="product.name" :src="product.image" width="100%"/>
			</li>
			<li class="cell">
				{{ product.name }}<br>
				<span>{{ product.description }}</span>
			</li>
			<li class="cell price">
				￥{{ product.price }}
			</li>
			<li class="cell num">
				<button @click="decrementQuantity">-</button>
				<input type="text" v-model.number="product.quantity">
				<button @click="incrementQuantity">+</button>
			</li>
			<li class="cell price">
				￥{{ product.price * product.quantity }}
			</li>
			<li class="cell edit">
				<button @click="deleteProduct">删除</button>
			</li>
		</ul>
	`,
	props: {
		product: Object,
		shopIndex: Number,
		productIndex: Number
	},
	methods: {
		deleteProduct() {
			this.$emit('delete-product', this.shopIndex, this.productIndex);
		},
		incrementQuantity() {
			this.$emit('increment-quantity', this.product);
		},
		decrementQuantity() {
			this.$emit('decrement-quantity', this.product);
		}
	}
};
const ShopSection = {
	template: `
		<div class="shop-section">
			<ul class="row">
					<input type="checkbox" v-model="shop.selected" @change="toggleShopSelection"> {{ shop.name }}
					<button @click="deleteShop">删除店铺</button>
				</li>
			</ul>
			<product-row
				v-for="(product, productIndex) in shop.products"
				:key="productIndex"
				:product="product"
				:shop-index="shopIndex"
				:product-index="productIndex"
				@delete-product="deleteProduct"
				@increment-quantity="incrementQuantity"
				@decrement-quantity="decrementQuantity"
			</div>
		`,
	components: {
		ProductRow
	},
	props: {
		shop: Object,
		shopIndex: Number
	},
	methods: {
		deleteShop() {
			if (!this.shop.products.every(product => !product.selected)) {
				const shouldDelete = confirm('店铺中还有选中的商品，是否删除？');
				if (shouldDelete) {
					this.$emit('delete-shop', this.shopIndex);
				}
			} else {
				this.$emit('delete-shop', this.shopIndex);
			}
		},
		deleteProduct(shopIndex, productIndex) {
			this.$emit('delete-product', shopIndex, productIndex);
		},
		incrementQuantity(product) {
			this.$emit('increment-quantity', product);
		},
		decrementQuantity(product) {
			this.$emit('decrement-quantity', product);
		},
		toggleShopSelection() {
			this.updateProductSelection(this.shop.selected);
		},
		updateProductSelection(selected) {
			this.shop.products.forEach(product => {
				product.selected = selected;
			});
		}
	},
	watch: {
		'shop.products': {
			deep: true,
			handler(newProducts) {
				const allUnselected = newProducts.filter(product => !product.selected);
				if (allUnselected.length === newProducts.length) {
					this.shop.selected = false;
				}
			}
		}
	}
};
const app = Vue.createApp({
	components: {
		ShopSection
	},
	data() {
		return {
			shops: [{
					name: 'MEIZU耳机',
					selected: false,
					products: [{
						name: 'MEIZU UR 高端定制耳机',
						description: '十单元 8699起',
						image: 'images/p1.png',
						price: 5800.00,
						quantity: 1,
						selected: false
					},
					{
						name: '魅族 POP2 高端定制耳机',
						description: '十单元 8699起',
						image: 'images/p6.png',
						price: 4800.00,
						quantity: 1,
						selected: false
					}]
				},
				{
					name: 'MEIZU手机',
					selected: false,
					products: [{
						name: '魅族 16XS',
						description: '十单元 10699起',
						image: 'images/p3.png',
						price: 5800.00,
						quantity: 1,
						selected: false
					},
					{
						name: '魅族 16s pro',
						description: '十单元 8699起',
						image: 'images/p1.png',
						price: 4800.00,
						quantity: 1,
						selected: false
					}]
				}
			]
		};
	},
	computed: {
		selectAll: {
			get() {
				return this.shops.every(shop => shop.selected && shop.products.every(product => product
					.selected));
			},
			set(value) {
				this.shops.forEach(shop => {
					shop.selected = value;
					shop.products.forEach(product => product.selected = value);
				});
			}
		},
		totalItems() {
			return this.shops.reduce((total, shop) => {
				return total + shop.products.reduce((sum, product) => sum + product.quantity, 0);
			}, 0);
		},
		selectedItems() {
			return this.shops.reduce((total, shop) => {
				return total + shop.products.reduce((sum, product) => {
					return product.selected ? sum + product.quantity : sum;
				}, 0);
			}, 0);
		},
		totalPrice() {
			return this.shops.reduce((total, shop) => {
				return total + shop.products.reduce((shopTotal, product) => {
					return shopTotal + (product.selected ? product.price * product.quantity :
						0);
				}, 0);
			}, 0);
		}
	},
	methods: {
		incrementQuantity(product) {
			product.quantity++;
		},
		decrementQuantity(product) {
			if (product.quantity > 1) {
				product.quantity--;
			}
		},
		deleteSelectedProducts() {
			if (this.selectedItems === 0) {
				alert('您没有选中商品，请选中商品再删除！');
				return;
			}
			this.shops.forEach(shop => {
				shop.products = shop.products.filter(product => !product.selected);
			});
		},
		deleteShop(shopIndex) {
			this.shops.splice(shopIndex, 1);
		},
		deleteProduct(shopIndex, productIndex) {
			this.shops[shopIndex].products.splice(productIndex, 1);
		},
		checkout() {
			if (this.selectedItems === 0) {
				alert('您没有选中商品，请选中商品再结账！');
				return;
			}
			try {
				const total = this.totalPrice;
				this.shops.forEach(shop => {
					shop.products = shop.products.filter(product => !product.selected);
				});
				this.shops = this.shops.filter(shop => shop.products.length > 0);
				alert(`结账成功！总金额：￥${total}`);
			} catch (error) {
				console.error('结账过程中出现错误:', error);
				alert('结账失败，请稍后重试！');
			}
		},
		updateProductSelection(products, selected) {
			products.forEach(product => {
				product.selected = selected;
			});
		}
	}
});
app.mount('#app');
